<template>
	<view class="viewport">
		<!-- 搜索框 -->
		<view>
			<search @click="gotoSearch"></search>
		</view>

		<view class="category">
			<!-- 左侧 -->
			<scroll-view scroll-y class="left">
				<view class="item " v-for="(item,index) in list" :class="{'active':index==acIndex}" :key="item.category_id"
					@tap="change(index)">
					{{item.name}}
				</view>
			</scroll-view>

			<!-- 右侧 -->
			<scroll-view scroll-y class="right">
				<view class="panel">
					<view class="section" v-for="item in list[acIndex]?.children" :key="item.category_id"
						@click="gotoList(item.name)">
						<image :src="item.image.external_url"></image>
						<view class="text">{{item.name}}</view>
					</view>
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import search from '@/components/searchyy.vue'
	import {
		cateApi
	} from '@/apis/cate.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	let list = ref([])
	let acIndex = ref(0)
	let history = ref()
	const gotoList = (kw) => {
		uni.navigateTo({
			url: '/pages/index/components/list?name=' + kw
		})
	}
	// 获取数据
	const cateList = async () => {
		const res = await cateApi()
		list.value = res.data.list
	}
	//高亮
	const change = (i) => {
		acIndex.value = i
	}
	const gotoSearch = (msg) => {
		uni.navigateTo({
			url: '/pages/searchyy/searchyy'
		})
	}
	onLoad(() => {
		cateList()
	})
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		overflow: hidden;
	}

	.viewport {
		height: 100%;
	}


	.category {
		display: flex;

		.left {
			width: 180rpx;
			background-color: #f6f6f6;
			height: 1300rpx;
			overflow: hidden;

			.item {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 96rpx;
				font-size: 26rpx;
				color: #444444;
			}

			.active {
				color: #fa2209;
				background-color: #fff;
				font-size: 22rpx;
			}

		}

		.right {
			padding-left: 10rpx;
			width: 570rpx;
			background-color: #fff;
			height: 1300rpx;
			overflow: hidden;

			.panel {
				display: flex;
				flex-wrap: wrap;
				flex: 33.3%;

				.section {
					padding: 20rpx 10rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					image {
						width: 163rpx;
						height: 163rpx;
					}

					.text {
						font-size: 26rpx;
						padding: 16rpx 0;
					}
				}
			}


		}
	}
</style>